<template>
  <div>
    <!--v-model:那一条数据该被选中   联系人数据的id-->
    <van-contact-list
        @select="select"
        @add="add"
        @edit="edit"
        :list="list"
        v-model="id"
        add-text="add"
        default-tag-text="我是默认联系人"></van-contact-list>
  </div>
</template>

<script>
  import { ContactList } from 'vant';
  export default {
    name: 'HelloWorld',
    data(){
      return {
        id:1,
        list:[
          {id:1,name:"二狗",tel:"120",isDefault:true},
          {id:2,name:"二蛋",tel:"130",isDefault:true},
          {id:3,name:"二娃",tel:"140",isDefault:true}
        ]
      }
    },
    components:{
      [ContactList.name]:ContactList
    },
    methods:{
      add(){
        console.log("add")
      },
      edit(contact,index){
        console.log("edit",contact,index)
      },
      select(contact,index){
        console.log("select",contact,index)
      }
    }
  }
</script>

<style scoped>

</style>
